<template>
    <div>
        <div class="box">
            <van-dialog v-model="show" title="登录" :showConfirmButton="false">
                <van-form @submit="onformObj">
                    <van-field v-model="phone" name="phone" label="手机号" placeholder="请输入手机号" :rules="telRules" />
                    <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                        :rules="[{ validator, message: '请输入8-16位字母加数字' }]" />
                    <div style="margin: 16px; display: flex; justify-content: space-around">
                        <van-button round type="primary" class="enter">登录</van-button>
                        <span class="signin" @click="signin()">注册</span>
                    </div>
                </van-form>
            </van-dialog>
            <div class="personal-container EC12_BG">
                <!-- 左边 -->
                <div class="previewer-container">
                    <!-- 头像 -->
                    <div class="previewer-wrapper">
                        <div class="base-info-container">
                            <div class="personal-info">
                                <div class="personal-self-info">
                                    <div class="personal-self-base-info">
                                        <div class="personal-avatar">
                                            <img src="~@/images/head-img.jpg" alt="avatar" class="personal-avatar-img"
                                                v-if="!userinfo.avatar" @click="imgchange" />
                                            <img :src="userinfo.avatar" alt="avatar" class="personal-avatar-img"
                                                v-if="userinfo.avatar" @click="imgchange" />
                                        </div>
                                        <div class="personal-desc">
                                            <div class="personal-name ET2 EC12">{{ userinfo.nickname }}</div>

                                        </div>
                                        <div class="personal-message">
                                            <img @click="tochat('chat')" src="~@/images/msg_icon.svg" alt="message icon" />
                                        </div>
                                    </div>
                                </div>
                                <div class="personal-account-info EC12_BG">
                                    <div class="personal-acount-item" v-show="myBuy" @click="gopurchased()">
                                        <div class="personal-account-value ET3">{{ userinfo.purchased }}</div>
                                        <div class="personal-account-title ET5 EC7">我的已购</div>
                                    </div>
                                    <div class="personal-acount-item" v-show="myCoupons" @click="goCoupon()">
                                        <div class="personal-account-value ET3">{{ userinfo.coupon }}</div>
                                        <div class="personal-account-title ET5 EC7">优惠券</div>
                                    </div>
                                    <div class="personal-acount-item" v-show="myCollection" @click="gocollect()">
                                        <div class="personal-account-value ET3">{{ userinfo.collect }}</div>
                                        <div class="personal-account-title ET5 EC7">我的收藏</div>
                                    </div>
                                    <div class="personal-acount-item" v-show="myAccount" @click="goaccount()">
                                        <div class="personal-line"></div>
                                        <div class="personal-account-value ET3"><span class="ET5">￥</span><span>{{
                                            userinfo.myprice
                                        }}</span></div>
                                        <div class="personal-account-title ET5 EC7">我的账户</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 订单 -->
                    <div class="my-order-box">
                        <div>
                            <div class="order-module-top">
                                <div class="order-module-title">订单</div>
                                <div class="order-module-all" @click="allOrders()">
                                    <p class="order-find-all">查看全部订单</p>
                                    <img src="~@/images/icon_next.png" />
                                </div>
                            </div>
                            <div class="order-module previewer-wrapper">
                                <div class="order-item" @click="receipt()">
                                    <div class="font_family icon-payment_icon order-item-icon"></div>
                                    <div class="order-item-text">待付款</div>
                                </div>
                                <div class="order-item" @click="Receiving()">
                                    <div class="font_family icon-receipt_icon order-item-icon"></div>
                                    <div class="order-item-text">待收货</div>
                                </div>
                                <div class="order-item" @click="appraise()">
                                    <div class="font_family icon-evaluation_icon order-item-icon"></div>
                                    <div class="order-item-text">待评价</div>
                                </div>
                                <div class="personal-line"></div>
                                <div class="order-item" @click="refund()">
                                    <van-icon name="after-sale" />
                                    <div class="order-item-text">退款</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 学习中心 -->
                    <div class="previewer-wrapper" @click="golearningCenter">
                        <div class="pc-cell learn-center-container pc-cell-alone">
                            <div class="pc-cell-wrapper">
                                <span class="pc-cell-icon-slot"></span>
                                <span class="pc-cell-title personal-center-font-weight">学习中心</span>
                                <span class="pc-cell-slot"><span class="distribution-tips ET4 EC9"
                                        style="color: rgb(12, 187, 8); background-color: rgba(12, 187, 8, 0.16)">新学习报告</span></span>
                            </div>
                        </div>
                    </div>
                    <!-- 学习工具 -->
                    <div class="previewer-wrapper">
                        <div class="study-assistance-container EC12_BG">
                            <div class="module-title personal-center-font-weight">学习工具</div>
                            <div class="study-style2">
                                <div class="study-item" @click="gocourse">
                                    <van-icon name="notes-o" />
                                    <div class="study-text EC7 ET5">兑换课程</div>
                                </div>
                                <!-- <div class="study-item" @click="gosignin">
                                    <van-icon name="calendar-o" />
                                    <div class="study-text EC7 ET5">打卡</div>
                                </div> -->
                                <!-- <div class="study-item" @click="gocircle">
                                    <van-icon name="smile-o" />
                                    <div class="study-text EC7 ET5">圈子</div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <!-- 推广中心 -->
                    <div class="previewer-wrapper essential_tools">
                        <div class="necessary-tool-container">
                            <div class="necessary-style1">
                                <!-- <div class="pc-cell pc-cell-alone">
                                    <div class="pc-cell-wrapper" @click="gopromotion">
                                        <span class="pc-cell-icon-slot">
                                            <img src="~@/images/tg-common.png" alt="" />
                                        </span>
                                        <span class="pc-cell-title personal-center-font-weight">推广中心</span>
                                        <span class="pc-cell-slot">
                                            <span class="distribution-tips ET4 EC9"> 赚高额佣金 </span>
                                        </span>
                                    </div>
                                </div> -->
                                <!-- <div class="pc-cell">
                                    <div class="pc-cell-wrapper">
                                        <span class="pc-cell-icon-slot">
                                            <img src="~@/images/tg-common.png" alt="" />
                                        </span>
                                        <span class="pc-cell-title personal-center-font-weight">我的成就</span>
                                        <span class="pc-cell-slot"></span>
                                    </div>
                                </div> -->
                                <div class="pc-cell" @click="goexchange">
                                    <div class="pc-cell-wrapper">
                                        <span class="pc-cell-icon-slot">
                                            <img src="~@/images/tg-common.png" alt="" />
                                        </span>
                                        <span class="pc-cell-title personal-center-font-weight">兑换中心</span>
                                        <span class="pc-cell-slot"></span>
                                    </div>
                                </div>
                                <!-- <div class="pc-cell" @click="gopresented">
                                    <div class="pc-cell-wrapper">
                                        <span class="pc-cell-icon-slot">
                                            <img src="~@/images/tg-common.png" alt="" />
                                        </span>
                                        <span class="pc-cell-title personal-center-font-weight">赠送记录</span>
                                        <span class="pc-cell-slot"></span>
                                    </div>
                                </div> -->
                                <!-- <div class="pc-cell" @click="goaward">
                                    <div class="pc-cell-wrapper">
                                        <span class="pc-cell-icon-slot">
                                            <img src="~@/images/tg-common.png" alt="" />
                                        </span>
                                        <span class="pc-cell-title personal-center-font-weight">我的奖品</span>
                                        <span class="pc-cell-slot"></span>
                                    </div>
                                </div> -->
                                <div class="pc-cell" @click="goAccountNumber()">
                                    <div class="pc-cell-wrapper">
                                        <span class="pc-cell-icon-slot">
                                            <img src="~@/images/tg-common.png" alt="" />
                                        </span>
                                        <span class="pc-cell-title personal-center-font-weight">账号设置</span>
                                        <span class="pc-cell-slot"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 底部导航栏 -->
                    <div class="bottom-tabbar EC12_BG">
                        <div class="bottom-tab" style="width: 33.3333%">
                            <router-link :to="{ name: 'shopindex' }"><img
                                    src="http://wechatapppro-1252524126.file.myqcloud.com/apprnDA0ZDw4581/image/348729353cd38913d27c3333bfb7585f.png"
                                    class="p-tab-img" />
                                <div class="tab-text ET5">首页</div>
                            </router-link>
                        </div>
                        <div class="bottom-tab" style="width: 33.3333%" @click="golearningCenter">
                            <img src="http://wechatapppro-1252524126.file.myqcloud.com/appAKLWLitn7978/image/cmVzb3VyY2UtY291cnNlQXJ0aWNsZS05ODQ1OTA2Mg.png"
                                class="p-tab-img" />
                            <div class="tab-text ET5">学习中心</div>
                        </div>
                        <div class="bottom-tab" style="width: 33.3333%">
                            <i class="font_family iconfont icon-my_pre1" style="color: rgb(12, 187, 8)"></i>
                            <div class="tab-text" style="">我的</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 微信注册组件 -->
            <!-- 直接显示微信登录组件 -->
            <xjweixinreglogin @loginData="loginData" ref="xjwxreglogincom"></xjweixinreglogin>
        </div>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import xjweixinreglogin from '@/components/frontshop/xjweixinreglogin.vue';
export default {
    components: {
        xjweixinreglogin
    },
    data() {
        return {
            shopname: localStorage.getItem('shopname') ? localStorage.getItem('shopname') : '', //店铺名
            actphone: '',
            action_phone: false,
            action_show: false,
            activeName: 'wapShop',
            wapShop: 'shopIndex',
            checked_info: true,
            checked_order: false,
            checked_center: false,
            checked_tool: false,
            checked_necessary: false,
            buy: true,
            coupons: true,
            collection: true,
            account: true,
            myBuy: true,
            myCoupons: true,
            myCollection: true,
            myAccount: true,
            show: false, //登录开关
            phone: '',
            password: '',
            telRules: [
                {
                    required: true,
                    message: '手机号不能为空',
                    trigger: blur
                },
                {
                    validator: (value) => {
                        return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
                    },
                    message: '请输入正确的手机号格式',
                    trigger: 'onBlur'
                }
            ],
            userinfo: '',
            action_TelRules: [
                {
                    required: true,
                    message: '手机号不能为空',
                    trigger: blur
                },
                {
                    validator: (value) => {
                        return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/.test(value);
                    },
                    message: '请输入正确的手机号格式',
                    trigger: 'onBlur'
                },
                // {
                //     validator: async () => {
                //         let res = await this.$frontaxios.post(this.$front.postPhoneVerify, { phone: this.actphone });
                //         if (res.code == 1) {
                //             return true;
                //         } else {
                //             return false;
                //         }
                //     },
                //     message: '手机号已注册',
                //     trigger: 'onBlur'
                // }
            ],
            randcode: ""
        };
    },
    methods: {
        tochat(path){
            this.$router.push({ name: 'chat'});
            // this.$router.push(path)
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        wapShopHandleClick(tab, event) {
            console.log(tab, event);
        },
        selectBuy(v) {
            v == false ? (this.myBuy = false) : (this.myBuy = true);
        },
        selectCoupons(v) {
            v == false ? (this.myCoupons = false) : (this.myCoupons = true);
        },
        selectCollection(v) {
            v == false ? (this.myCollection = false) : (this.myCollection = true);
        },
        selectAccount(v) {
            v == false ? (this.myAccount = false) : (this.myAccount = true);
        },
        //点击注册跳转到注册页面
        signin() {
            this.$router.push({ name: 'myregister' }); //注册git
        },
        wxlogin() {
            this.action_show = true;
        },
        async onformObj(info) {
            let res = await this.$frontaxios.post(this.$front.postLoginUser, info);
            console.log(res);
            if (res.code == 1) {
                Cookies.set('fronttoken', res.data.token);
                Cookies.set('frontrefreshtoken', res.data.refreshtoken);
                localStorage.setItem('fronttoken', res.data.token);
                localStorage.setItem('frontrefreshtoken', res.data.refreshtoken);
                sessionStorage.setItem('htmllogintag', 1);
                this.$notify({ type: 'success', message: '登录成功' });
                this.show = false;
                this.getData();
            } else if (res.code == -3) {
                //出现验证码
                console.log('出现验证码');
            } else {
                this.$notify({ type: 'warning', message: '登录失败，请检查手机号和密码' });
            }
        },
        validator(val) {
            return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(val);
        },
        allOrders() {
            this.$router.push({ name: 'myallorders', query: { active: 0 } });
        },
        receipt() {
            this.$router.push({ name: 'myallorders', query: { active: 1 } });
        },
        Receiving() {
            this.$router.push({ name: 'myallorders', query: { active: 2 } });
        },
        appraise() {
            this.$router.push({ name: 'myallorders', query: { active: 3 } });
        },
        refund() {
            this.$router.push({ name: 'myallorders', query: { active: 4 } });
        },
        goCoupon() {
            this.$router.push({ name: 'coupon' });
        },
        gopurchased() {
            this.$router.push({ name: 'purchased' });
        },
        goaccount() {
            sessionStorage.setItem('myprice', this.userinfo.myprice);
            this.$router.push({ name: 'account' });
        },
        gocollect() {
            this.$router.push({ name: 'collect' });
        },
        goAccountNumber() {
            this.$router.push({ name: 'AccountNumber' });
        },
        gosignin() {
            this.$router.push({ name: 'signin' });
        },
        gocourse() {
            this.$router.push({ name: 'course' });
        },
        gocircle() {
            this.$router.push({ name: 'circle' });
        },
        golearningCenter() {
            this.$router.push({ name: 'learningCenter' });
        },
        goexchange() {
            this.$router.push({ name: 'exchange' });
        },
        gopresented() {
            this.$router.push({ name: 'presented' });
        },
        gopromotion() {
            this.$router.push({ name: 'promotion' });
        },
        goaward() {
            this.$router.push({ name: 'award' });
        },
        register() {
            this.wx_show = false;
            this.action_phone = true;
        },
        imgchange() {
            this.$router.push({ name: 'imgchange' });
        },
        async getData() {
            let htmllogintag = sessionStorage.getItem('htmllogintag') ? sessionStorage.getItem('htmllogintag') : 0;//html登录
            let logintag = sessionStorage.getItem('logintag') ? sessionStorage.getItem('logintag') : 0;//微信登录
            if (isWeixin()) {
                if (logintag == 1) {
                    let res = await this.$frontaxios.get(this.$front.getUserInfo);
                    console.log(res);
                    if (res.code == 1) {
                        this.userinfo = res.data;
                    } else if (res.code == -2) {
                        this.$toast.fail('没有配置用户提现信息');
                    }
                    else {
                        this.$toast.fail('获取用户数据失败');
                    }
                }
            } else {
                if (htmllogintag == 1) {
                    let res = await this.$frontaxios.get(this.$front.getUserInfo);
                    console.log(res);
                    if (res.code == 1) {
                        this.userinfo = res.data;
                    } else if (res.code == -2) {
                        this.$toast.fail('没有配置用户提现信息');
                    }
                    else {
                        this.$toast.fail('获取用户数据失败');
                    }
                }
            }
        },
        loginData(val) {
            if (val == 1) {
                this.getData()
            }
        }
    },
    //根据判断本地是否有token值 来控制显示登录窗口
    async created() {
        console.log(this.$route)
        if (isWeixin()) {
            sessionStorage.setItem('loginflag', 1);
        } else {
            //html5浏览器
            let htmllogintag = sessionStorage.getItem('htmllogintag') ? sessionStorage.getItem('htmllogintag') : 0
            this.action_show = false;
            let rst = Cookies.get('fronttoken');
            let islogin = this.$route.query.islogin;
            if (rst == undefined || islogin == 1 || (htmllogintag == 0)) {
                console.log(rst == undefined , islogin == 1 , (htmllogintag == 0))
                this.show = true;
            } else {
                this.getData();
                this.show = false;
            }
        }
    }
};
</script>

<style scoped>
@import '~@/components/common/css/common.css';

/* 移动店铺- 个人中心*/
.box {
    background: #fff;
}

.personal-container {
    display: flex;
    color: #333;
}

.EC12_BG {
    background-color: #fff;
}

.previewer-container {
    position: relative;
    padding-bottom: 82px;
    width: 100%;
    background-color: #f5f6f9;
    box-shadow: 2px 3px 5px #ececec;
    min-height: 700px;
}

.previewer-container .previewer-wrapper {
    cursor: pointer;
    position: relative;
}

.base-info-container {
    background: #f0f1f3;
    margin-bottom: 12px;
}

.personal-self-info {
    background: url(~@/images/bg.png) center center;
}

.personal-self-base-info {
    display: flex;
    padding: 32px 18px;
    position: relative;
}

.personal-self-base-info .personal-avatar {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 60px;
    background: #ddeeff;
}

.personal-self-base-info .personal-avatar .personal-avatar-img {
    width: 100%;
    height: 100%;
}

.personal-self-base-info .personal-desc {
    margin-left: 16px;
}

.ET2 {
    font-size: 18px;
}

.EC12 {
    color: #ffffff;
}

.personal-self-base-info .personal-message {
    flex-grow: 1;
    text-align: right;
}

.personal-account-info {
    display: flex;
    align-items: center;
    text-align: center;
}

.personal-account-info .personal-acount-item {
    display: flex;
    flex-direction: column;
    align-content: center;
    height: 88px;
    position: relative;
    flex-grow: 1;
}

.personal-account-info .personal-acount-item .personal-account-value {
    margin-top: 18px;
    height: 26px;
    color: #333333;
    font-size: 20px;
    font-weight: 700;
    font-family: 'D-DIN';
    text-align: center;
    line-height: 26px;
}

.personal-account-info .personal-acount-item .personal-account-title {
    margin-top: 4px;
    height: 18px;
    color: #666666;
    font-size: 12px;
    font-weight: 400;
    font-family: 'PingFang SC';
    text-align: center;
    line-height: 18px;
}

.previewer-container .my-order-box {
    overflow: hidden;
}

.previewer-container .order-module-top {
    background: white;
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
}

.previewer-container .order-module-top .order-module-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.previewer-container .order-module-top .order-module-all {
    font-size: 12px;
    color: #999;
    display: flex;
}

.previewer-container .order-module-top img {
    height: 16px;
    margin-right: -6px;
}

.previewer-container .order-module {
    padding: 0 12px;
    display: flex;
    align-items: center;
    /* width: 379px; */
    height: 84px;
    background: white;
    font-size: 28px;
}

.previewer-container .order-module .order-item {
    display: flex;
    flex: 1;
    align-items: center;
    flex-direction: column;
}

.previewer-container .order-module .order-item .order-item-icon {
    font-size: 28px;
}

/* .icon-payment_icon:before {
    content: '\e7de';
}

.icon-receipt_icon:before {
    content: '\e7df';
} */

/* .icon-evaluation_icon:before {
    content: '\e7dc';
} */
/* 
.icon-order_icon:before {
    content: '\e7dd';
} */

.previewer-container .order-module .order-item .order-item-text {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    line-height: 12px;
}

.previewer-container .order-module .personal-line {
    width: 1px;
    height: 24px;
    background: #e2e2e2;
    border-radius: 1px;
    filter: blur(0px);
}

.pc-cell.pc-cell-alone {
    margin-bottom: 12px;
}

.previewer-container .learn-center-container {
    margin-top: 12px;
}

.pc-cell {
    padding-left: 16px;
    background-color: #fff;
}

.pc-cell-wrapper {
    display: flex;
    align-items: center;
    height: 60px;
    background: url(~@/images/icon_next.png) no-repeat;
    background-position-x: calc(100% - 10px);
    background-position-y: center;
    background-size: 20px;
}

.pc-cell:not(.pc-cell-alone)+.pc-cell .pc-cell-wrapper {
    border-top: 1px solid #f5f5f5;
}

.pc-cell-icon-slot,
.pc-cell-img {
    margin-right: 12px;
}

.previewer-container .pc-cell.learn-center-container .pc-cell-icon-slot {
    margin-right: 0;
}

.personal-center-font-weight {
    font-weight: bold;
}

.pc-cell-slot {
    flex-grow: 1;
    padding-right: 36px;
    text-align: right;
}

.previewer-container .learn-center-container .distribution-tips {
    display: inline-block;
    text-align: center;
    width: 92px;
    height: 20px;
    border-radius: 10px;
}

.module-title {
    padding: 18px 18px 0;
}

.study-style2 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 18px;
    font-size: 0;
    text-align: center;
}

.study-style2 .study-item {
    margin-bottom: 20px;
    width: 20%;
}

.study-style2 .study-item .study-img {
    width: 24px;
    height: 24px;
}

.study-style2 .study-item .study-text {
    margin-top: 10px;
}

.ET5 {
    font-size: 12px;
}

.EC7 {
    color: #666;
}

.previewer-container .previewer-wrapper.essential_tools {
    margin-top: 12px;
}

.pc-cell-icon-slot img {
    width: 24px;
    height: 24px;
    display: block;
}

.necessary-style1 .distribution-tips {
    display: inline-block;
    text-align: center;
}

.previewer-container .bottom-tabbar {
    position: fixed;
    bottom: 0;
    display: flex;
    padding-top: 4px;
    width: 100%;
    height: 49px;
}

.previewer-container .bottom-tabbar .bottom-tab {
    text-align: center;
}

.previewer-container .bottom-tabbar .bottom-tab .p-tab-img {
    width: 24px;
    height: 24px;
}

.previewer-container .bottom-tabbar .bottom-tab .tab-text {
    color: #c0c0c0;
    transform: scale(0.84, 0.84);
}

.font_family {
    font-family: 'font_family' !important;
    font-size: 16px;
    font-style: normal;
}

.icon-my_pre1:before {
    content: '\e794';
}

/* .previewer-container .previewer-wrapper.active:after,
.previewer-container .previewer-wrapper:hover:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #2878f0;
} */

/* .previewer-container .previewer-wrapper:hover:after {
    border: 1px dashed #2878f0;
} */
</style>

<style lang="scss" scoped>
.el-tabs__header {
    margin: 0;
}

.el-tabs__content {
    background: #fff;
}

.el-collapse-item__header {
    height: 55px;
    padding-left: 20px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}

.el-collapse-item__header .el-checkbox {
    margin-right: 8px;
}

.editor-container .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background: #b2b2b2;
    border-color: #b2b2b2;
    border-radius: 2px;
}

.editor-container .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #fff;
}

.enter,
.signin {
    text-align: center;
    line-height: 44px;
    width: 100px;
    border: 1px solid;
    border-radius: 2rem;
}

.study-assistance-container {
    .van-icon {
        font-size: 30px;
    }
}

.van-icon-success {
    color: #05c160;

}

.van-icon-add-o {
    color: rgba(255, 255, 255, 0.815);
    position: absolute;
    top: 25px;
    left: 60px;
    font-weight: 700;
}
</style>